<template>
  <vxe-modal
    v-model="dialogFormVisible"
    title="人员选择"
    width="30%"
    show-footer
    destroy-on-close
    @close="close"
  >
    <template #default>
      <div class="common-layout">
        <el-container>
          <el-aside width="200px">
            <el-tree
              ref="myTree"
              node-key="id"
              :load="loadNode"
              lazy
              :props="{
                children: 'children',
                label: 'name',
                isLeaf: 'leaf',
              }"
              current-node-key
              highlight-current
              @node-click="handleNodeClick"
            />
          </el-aside>
          <el-main>
            <vxe-form
              ref="formRef"
              :data="form"
              :rules="rules"
              title-align="right"
              title-width="120"
              prevent-submit
            >
              <vxe-form-item title="姓名" span="24" field="name">
                <template #default>
                  <el-input v-model="form.name" type="text" />
                </template>
              </vxe-form-item>
            </vxe-form>
          </el-main>
        </el-container>
      </div>
    </template>
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button-group>
          <el-button
            v-loading.fullscreen.lock="fullscreenLoading"
            class="filter-item"
            type="primary"
            @click="save()"
          >
            <i class="icon-wpkj-save"></i>
            保存
          </el-button>
          <el-button @click="close()">取消</el-button>
        </el-button-group>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
  import { Finished } from '@element-plus/icons-vue'
  import { getDeptPage } from '@/api/system/dept/index'

  export default defineComponent({
    name: 'PersonnelSelection',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        lazyDeptLoading: false,
        gridLoading: false,
        form: {
          id: '',
          code: '',
          parentId: '',
          name: '',
          sort: 0,
          type: '',
          leaderUserId: '',
          parentName: '',
          phone: '',
          email: '',
          status: 0,
        },
        rules: {
          name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
          type: [{ required: true, trigger: 'blur', message: '请输入类型' }],
          sort: [{ required: true, trigger: 'blur', message: '请输入排序' }],
          status: [
            { required: true, message: '状态不能为空', trigger: 'blur' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })

      const open = (obj) => {
        state.dialogFormVisible = true
      }

      const loadNode = (node, resolve) => {
        if (node.level === 0) {
          getDeptList(node, resolve, '0')
        }
        if (node.level >= 1) {
          getDeptList(node, resolve, node.data.id)
        }
      }

      const getDeptList = (node, resolve, id) => {
        state.lazyDeptLoading = true
        getDeptPage({
          parentId: id,
        })
          .then((response) => {
            state.lazyDeptLoading = false
            if (response.code === 0 || response.code === 200) {
              response.data.forEach((item) => {
                item.children = []
              })
              const data = $XEUtils.toArrayTree(response.data, {
                parentKey: 'parentId',
                key: 'id',
                children: 'childNode',
              })
              return resolve(Object.assign([], data))
            } else {
              $baseMessage(response.msg, 'error')
            }
          })
          .catch((err) => {
            state.lazyDeptLoading = false
            $baseMessage(err, 'error')
          })
      }
      const handleNodeClick = (row) => {
        state.gridLoading = true
        getDeptPage({
          parentId: id,
        })
          .then((response) => {
            state.gridLoading = false
            if (response.code === 0 || response.code === 200) {
              response.data.forEach((item) => {
                item.children = []
              })
              const data = $XEUtils.toArrayTree(response.data, {
                parentKey: 'parentId',
                key: 'id',
                children: 'childNode',
              })
              return resolve(Object.assign([], data))
            } else {
              $baseMessage(response.msg, 'error')
            }
          })
          .catch((err) => {
            state.gridLoading = false
            $baseMessage(err, 'error')
          })
      }
      const close = () => {
        state['formRef'].reset()
        state.form = {
          id: '',
          node: '',
          parentNode: '',
          name: '',
          sortNo: 0,
          type: '',
          remark: '',
          parentName: '',
        }
        state.dialogFormVisible = false
      }

      return {
        ...toRefs(state),
        loadNode,
        open,
        handleNodeClick,
        close,
        Finished,
      }
    },
  })
</script>
~/src/api/system/dept/index~/src/api/system/user/index
